<template>
  <div class="app-container">
    <a-title @clickPreview="preview" />
    <el-form
      :model="queryParams"
      ref="queryForm"
      :rules="rules"
      :inline="true"
      label-width="150px"
      style="margin-top: 20px"
    >
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="项目代码" prop="codes">
        <el-input
          v-model="queryParams.codes"
          placeholder="请输入项目代码"
          clearable
          size="small"
          style="width: 645px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="项目负责人" prop="projectLeader">
        <el-input
          v-model="queryParams.projectLeader"
          placeholder="请输入项目负责人"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="项目执行部门" prop="executeDept">
        <el-input
          v-model="queryParams.executeDept"
          placeholder="请输入项目执行部门"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="委托单位" prop="party">
        <el-input
          v-model="queryParams.party"
          placeholder="请输入委托单位"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="项目所在地区" prop="areas">
        <el-cascader
          v-model="queryParams.areas"
          :options="areaOptions"
          filterable
          clearable
          :props="{ value: 'id', checkStrictly: true }"
          style="width: 240px"
          @change="getLastNodes"
        />
      </el-form-item>
      <el-form-item label="项目总投资">
        <el-form-item prop="investmentMin">
          <el-input
            v-model="queryParams.investmentMin"
            placeholder="最小值"
            size="small"
            style="width: 102px"
            clearable
            @change="handleMinChange"
          />
        </el-form-item>
        <el-form-item>
          <div>-</div>
        </el-form-item>
        <el-form-item prop="investmentMax">
          <el-input
            v-model="queryParams.investmentMax"
            placeholder="最大值"
            size="small"
            style="width: 102px"
            clearable
            @change="handleMaxChange"
          />
        </el-form-item>
      </el-form-item>

      <el-form-item
        label="业务类别"
        prop="businessTypeId"
        style="margin-left: -6px"
      >
        <el-cascader
          v-model="queryParams.businessTypeId"
          :options="categoryOptions"
          :show-all-levels="false"
          :props="{ value: 'id', emitPath: false }"
          filterable
          clearable
          style="width: 240px"
          placeholder="请选择业务类别"
        />
      </el-form-item>
      <el-form-item label="报告类别" prop="reportType">
        <el-input
          v-model="queryParams.reportType"
          placeholder="请输入报告类别"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="报告编号" prop="reportNo">
        <el-input
          v-model="queryParams.reportNo"
          placeholder="请输入报告编号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="项目开始服务日期" prop="startDate">
        <el-date-picker
          v-model="queryParams.startDate"
          type="daterange"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 240px"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="项目完成服务日期" prop="endDate">
        <el-date-picker
          v-model="queryParams.endDate"
          type="daterange"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 240px"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item label="报告名称/文件标题" prop="nameAndReportName">
        <el-input
          v-model="queryParams.nameAndReportName"
          placeholder="请输入报告名称或文件标题"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="文件类型" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择文档类型"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="docDate">
        <el-date-picker
          v-model="queryParams.docDate"
          type="daterange"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 240px"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item style="margin-left: 30px">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="reset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="bathDownload"
          :disabled="multiple"
          >批量下载</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
    </el-row>

    <el-table
      stripe
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
      @sort-change="tableSortChange"
      @selection-change="handleSelectionChange"
      :default-sort="{ prop: 'originTime', order: 'descending' }"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        label="项目名称"
        prop="projectName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        min-width="200"
      ></el-table-column>
      <el-table-column
        label="项目代码"
        prop="code"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="150"
      ></el-table-column>
      <el-table-column
        label="项目负责人"
        prop="projectLeader"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="110"
      ></el-table-column>
      <el-table-column
        label="项目执行部门"
        prop="executeDept"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        label="业务类别"
        prop="businessCategoryName"
        :sort-orders="['ascending', 'descending']"
        align="center"
        sortable="custom"
        width="150"
      ></el-table-column>
      <el-table-column
        label="报告类别"
        prop="reportType"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        label="报告编号"
        prop="reportNo"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="150"
      ></el-table-column>
      <el-table-column label="文件类型" prop="type" align="center" width="100">
        <template scope="scope">
          <div v-if="scope.row.type === '0'">收资管理</div>
          <div v-else-if="scope.row.type === '1'">项目文档</div>
          <div v-else-if="scope.row.type === '2'">电子归档</div>
          <div v-else-if="scope.row.type === '3'">成果校审</div>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column
        label="报告名称"
        prop="reportName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        align="left"
        min-width="200"
      ></el-table-column>
      <el-table-column
        label="文件标题"
        prop="name"
        :sort-orders="['ascending', 'descending']"
        align="center"
        sortable="custom"
        width="180"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        :sort-orders="['ascending', 'descending']"
        align="center"
        sortable="custom"
        width="170"
      ></el-table-column>

      <el-table-column label="附件" prop="auditor" align="center" width="320">
        <template slot-scope="scope">
          <div
            v-for="item in scope.row.attachments"
            :key="item.fileId"
            class="fileTable"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.fileName"
              placement="top"
            >
              <div class="fileTableTr" style="width: 320px">
                {{ item.fileName }}
              </div>
            </el-tooltip>
            <div v-if="item.fileName" style="width: 200px">
              <a
                class="a-style"
                @click="downloadOne(item.fileId, item.fileName)"
                >下载</a
              >
              <!-- <a class="a-style" :href="item.storagePath" :download="item.fileName">下载</a> -->
              <a class="a-style" @click="handlePreview(item)">预览</a>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe
        :src="manualPreviewUrl"
        frameborder="0"
        width="100%"
        height="700px"
      ></iframe>
    </el-dialog>
  </div>
</template>
<script>
import { wholeDocQuery, wholeDocQueryExport } from "@/api/business/projectDoc";
import { treeselect } from "@/api/system/business_category";
import { provinceCity, provinceCityTree } from "@/api/provinceCity";
import aTitle from "@/components/Title";
import { handleBatchDownload } from "@/api/zipdownload";
const MIN_NUMBER = 1;
const MAX_NUMBER = 1000000000;
export default {
  name: "DocSearch",
  components: { aTitle },
  data() {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      rules: {
        investmentMin: [
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMin, trigger: "blur" },
        ],
        investmentMax: [
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMax, trigger: "blur" },
        ],
      },
      total: 0,
      areaOptions: [],
      categoryOptions: [],
      // 非单个禁用
      files: [],
      multiple: true,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        projectName: undefined,
        projectLeader: undefined,
        businessTypeId: undefined,
        name: undefined,
        status: undefined,
        workflowStartTime: undefined,
        workflowEndTime: undefined,
        docDate: undefined,
      },
      loading: false,
      tableData: [],
      statusOptions: [
        {
          dictValue: "0",
          dictLabel: "收资管理",
        },
        {
          dictValue: "1",
          dictLabel: "项目文档",
        },
        {
          dictValue: "2",
          dictLabel: "电子归档",
        },
        {
          dictValue: "3",
          dictLabel: "成果校审",
        },
      ],
    };
  },
  created() {
    this.getList();
    treeselect().then((res) => {
      if (res.code === 200) {
        this.categoryOptions = res.data;
      }
    });
    //省市区加载
    provinceCityTree().then((res) => {
      if (res.code === 200) {
        this.areaOptions = res.data;
      }
    });
  },
  methods: {
    preview() {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}首页/流程搜索.xlsx`
      )}&name=${encodeURIComponent("流程搜索.xlsx")}`;
    },
    getList() {
      this.loading = true;
      var reqParams = {
        businessCategoryId: this.queryParams.businessTypeId,
        projectName: this.queryParams.projectName,
        projectLeader: this.queryParams.projectLeader,
        codes: this.queryParams.codes,
        executeDept: this.queryParams.executeDept,
        party: this.queryParams.party,
        area: this.queryParams.area,
        investmentMin: this.queryParams.investmentMin,
        investmentMax: this.queryParams.investmentMax,
        reportType: this.queryParams.reportType,
        reportNo: this.queryParams.reportNo,
        nameAndReportName: this.queryParams.nameAndReportName,
        type: this.queryParams.type,

        order: this.queryParams.order,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        sortBy: this.queryParams.sortBy,
      };
      if (this.queryParams.startDate) {
        reqParams.startDateStart = this.queryParams.startDate[0];
        reqParams.startDateEnd = this.queryParams.startDate[1];
      }
      if (this.queryParams.endDate) {
        reqParams.endDateStart = this.queryParams.endDate[0];
        reqParams.endDateEnd = this.queryParams.endDate[1];
      }
      if (this.queryParams.docDate) {
        reqParams.docDateBegin = this.queryParams.docDate[0];
        reqParams.docDateEnd = this.queryParams.docDate[1];
      }

      wholeDocQuery(reqParams).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows;
          this.loading = false;
          this.total = res.total;
        }
      });
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        projectName: undefined,
        businessTypeId: undefined,
        name: undefined,
        status: undefined,
        workflowStartTime: undefined,
        workflowEndTime: undefined,
      };
      this.getList();
    },
    tableSortChange(column) {
      this.queryParams.pageNum = 1;

      if (column.order === "descending") {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "desc";
      } else {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "asc";
      }
      this.getList();
    },
    validateCom(rule, value, callback) {
      debugger;
      if (value) {
        const one = Number(value);
        if (one < MIN_NUMBER) {
          return callback(new Error("输入值必须大于0"));
        } else if (one > MAX_NUMBER) {
          return callback(new Error("输入值必须小于100000"));
        }
        return callback();
        return callback(new Error("输入值必须为正整数"));
      }
    },
    validateMin(rule, value, callback) {
      const one = Number(value);
      const max = Number(this.queryParams.investmentMax);
      if (!max || one < max) {
        return callback();
      }
      return callback(new Error("输入值不得大于" + max));
    },
    validateMax(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.queryParams.investmentMin);
      if (!min || one > min) {
        return callback();
      }
      return callback(new Error("输入值不得小于" + min));
    },
    handleMinChange() {
      this.$refs.queryForm.validateField("investmentMax");
    },
    handleMaxChange() {
      this.$refs.queryForm.validateField("investmentMin");
    },
    getFormData() {
      const ret = {};
      this.$refs.queryForm.validate((valid) => {
        ret.valid = valid;
        ret.queryParams = this.queryParams;
      });
      return ret;
    },
    handleExport() {
      var reqParams = {
        businessCategoryId: this.queryParams.businessTypeId,
        projectName: this.queryParams.projectName,
        codes: this.queryParams.codes,
        executeDept: this.queryParams.executeDept,
        party: this.queryParams.party,
        area: this.queryParams.area,
        investmentMin: this.queryParams.investmentMin,
        investmentMax: this.queryParams.investmentMax,
        reportType: this.queryParams.reportType,
        reportNo: this.queryParams.reportNo,
        nameAndReportName: this.queryParams.nameAndReportName,
        type: this.queryParams.type,

        order: this.queryParams.order,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        sortBy: this.queryParams.sortBy,
      };
      if (this.queryParams.startDate) {
        reqParams.startDateStart = this.queryParams.startDate[0];
        reqParams.startDateEnd = this.queryParams.startDate[1];
      }
      if (this.queryParams.endDate) {
        reqParams.endDateStart = this.queryParams.endDate[0];
        reqParams.endDateEnd = this.queryParams.endDate[1];
      }

      wholeDocQueryExport(reqParams).then((res) => {
        if (res.code === 200) {
          this.download(res.msg);
        }
      });
    },
    getLastNodes(val) {
      if (val) {
        var areaText = "";
        if (val[0]) {
          areaText = val[0] + ";";
        }

        if (val[1]) {
          areaText = areaText + val[1] + ";";
        }

        if (val[2]) {
          areaText = areaText + val[2] + ";";
        }
        this.queryParams.area = areaText;
      }
    },
    downloadOne(id, name) {
      this.downloadBlob(id, name);
    },
    handlePreview(row) {
      this.filePreview(row.fileName, row.storagePath);
    },
    bathDownload() {
      debugger;
      const filesList = [];
      this.files.map((item) => {
        if (item.attachments.length > 0) {
          item.attachments.map((obj) => {
            filesList.push({
              fileurl: "/api/system/download/" + obj.fileId,
              fileName: obj.fileName,
            });
          });
        } else {
          this.msgError(item.name + "文件中没有附件");
        }
      });
      handleBatchDownload(filesList);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.files = selection;
      this.multiple = !selection.length;
    },
  },
};
</script>
<style lang="scss" scoped>
.tabletitle {
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe6ec;
  span {
    font-family: Microsoft YaHei;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.41px;
  }
  .el-button--medium {
    font-size: 12px;
    padding: 7px 13px;
  }
}

/deep/.el-table .cell {
  font-family: Microsoft YaHei;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0;
  a {
    font-family: Microsoft YaHei;
    font-size: 14px;
    color: #1890ff;
    letter-spacing: 0;
    text-align: right;
    line-height: 14px;
    margin-left: 5px;
  }
}

/deep/.el-table--medium td {
  padding: 12px 0;
}
</style>